<template>
	<view class="video-main u-flex-center u-col-center"
		v-if="systemConfig.index_video_url_list && systemConfig.index_video_url_list.length > 0">
		<video class="video" autoplay loop muted show-mute-btn object-fit="fill"
			:src="systemConfig.index_video_url_list[videoIndex]" @ended="ended"></video>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				videoIndex: 0,
			};
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
			}),
		},
		methods: {
			ended() {
				if (this.systemConfig && this.systemConfig.index_video_url_list && this.systemConfig.index_video_url_list
					.length > 0) {
					this.videoIndex = (this.videoIndex + 1) % this.systemConfig.index_video_url_list.length;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.video-main {
		padding-top: 30rpx;

		.video {
			width: 694rpx;
			height: 400rpx;
		}
	}
</style>